<template>
  <div class="container">
    <section class='f-mtp10'>
      <div class='u-title'>
        <h2> 筛选查询</h2>
      </div>
      <div class='u-content u-filter f-ptp10'>
        <div class='u-filter-item'>
          <label for="">专家名称：</label>
          <el-input class='f-w200' v-model="name" placeholder="专家名称"></el-input>
        </div>
        <el-button class='f-h40' @click="getList" type="primary">查 询</el-button>
      </div>
    </section>

    <div class='f-mtp20'>
      <div class='u-title'>
        <h2>专家团队</h2>
        <router-link class='u-title-btn' to='/home/addExpert'>添 加</router-link>
      </div>
      <el-table
        :data="teamList"
        border
        style="width: 100%">
        <el-table-column prop="id" label="专家ID" width="180"></el-table-column>
        <el-table-column prop="licenseNo" label="律师证编号" width="180"></el-table-column>
        <el-table-column prop="name" label="专家姓名" width="180"></el-table-column>
        <el-table-column prop="pic" label="专家图片" width="180">
          <template slot-scope="scope">
            <img class='img-cover' :src="scope.row.pic" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="major" label="专业资质" width="180"></el-table-column>
        <el-table-column prop="education" label="教育背景" width="180"></el-table-column>
        <el-table-column prop="advantage" label="优势" width="180"></el-table-column>
        <el-table-column prop="desc" label="简介" width="180"></el-table-column>
        <el-table-column prop="manage" label="管理">
          <template slot-scope="scope">
            <router-link class='s-c-green f-csp f-mrt10' :to='"/home/editExpert/" + scope.row.id'>编辑</router-link>
            <span @click='deleteBtnClickEvent(scope.row)' class='s-c-red f-csp'>删除</span>
          </template>
        </el-table-column>
      </el-table>
      <div v-if='totalCount > 0' class='f-oh f-ptp20 f-pbt20'>
        <el-pagination
          class='f-fr'
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          background
          :total="totalCount">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TeamManage',
  data() {
    return {
      name: '', // 专家名称
      password: '',
      currentPage: 1,
      pageSize: 10,
      totalCount: 0,
      teamList: []
    }
  },
  created() {
    this.getList();
  },
  methods: {

    // 删除按钮点击事件
    deleteBtnClickEvent(row) {
      this.$confirm('确定删除该专家？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteById(row.id);
      })
    },
    // 根据专家id删除专家
    deleteById(expertId) {
      this.$store.dispatch('DELETE_EXPERT', {
        id: expertId
      }).then(res => {
        if(res.data.retCode == 0) {
          this.$message.success('删除成功！');
          this.getList();
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },
    getList() {
      const params = {
        pageNum: this.currentPage - 1,
        pageSize: this.pageSize,
        name: this.name
      }
      this.$store.dispatch('GET_TEAM_LIST', params).then(res => {
        console.log('GET_TEAM_LIST::', res);
        if(res.data.retCode == 0) {
          this.teamList = res.data.data;
          this.totalCount = res.data.totalCount;
          this.pageSize = res.data.pageSize;
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },

    // 分页插件回调函数
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getList();
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.img-cover{
  height: 30px;
  max-width: 90px;
}
.top{
  /* display: flex; */
  overflow: hidden;
  padding: 10px 0;
}
.top-item{
  float: left;
  margin-right: 20px;
}
.w-120{
  width: 120px;
}
.w-200{
  width: 200px;
}
</style>
